<template>
    <div class="top-right">
        <div class='right-a'></div>
        <div class="right-b"></div>
        <div class="right-c"></div>
    </div>
</template>
  
<script setup>
import * as echarts from "echarts";
import $ from 'jquery'
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const data = reactive({})
function righttop(obj) {
    let myright = echarts.init(document.querySelector(".right-a"))
    // console.log(obj,21);
    let topname1 = []
    let topname2 = []
    obj.slice(0, 5).forEach(item => {
        topname1.push(item.name)
        topname2.push(
            Math.round((item.heal / item.confirm) * 100)
        )
    });
    var data = topname2
    var titlename = topname1
    var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
    let option = {
        grid: {
            top: '15%',
            right: '10%',
            left: '10%',
            bottom: '20%'
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                textStyle: {
                    fontSize: 6,
                },
                // formatter: function (value, index) {
                //     return [
                //         '{lg|' + (index + 1) + '}' + '{title|' + value + '} '
                //     ].join('\n')
                // },
                // rich: {
                //     lg: {
                //         backgroundColor: '#339911',
                //         color: '#fff',
                //         borderRadius: 15,
                //         // padding: 5,
                //         align: 'center',
                //         width: 15,
                //         height: 15
                //     },
                // }
            },


        }, {
            show: true,
            inverse: true,
            // data: valdata,
            axisLabel: {
                textStyle: {
                    fontSize: 10,
                    color: '#fff',
                },
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },

        }],
        series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: data,
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: function (params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}%'
                }
            },
        }]
    };
    myright.setOption(option)
    window.addEventListener(
        "resize",
        function (e) {
            myright.resize();

        },
        false
    );
}

function rightcon(obj) {
    let myright = echarts.init(document.querySelector(".right-b"))
    let time = []
    let h = []
    let s = []
    obj.forEach(item => {
        time.push(item.date)
        h.push(item.all.heal)
        s.push(item.all.dead)
    })
    let option = {
        grid: {
            top: '20%',
            bottom: '20%',
            left: '20%',
            right: '10%',
        },
        tooltip: {
            trigger: 'axis',
            label: {
                show: true,
            },
        },
        legend: {
            icon: 'circle',
            align: 'left',
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 20,
            borderRadius: 4,
            textStyle: {
                fontSize: 14,
            },
            x: 'center',
            y: 'bottom',
            data: ['死亡人数', '治愈人数'],
        },
        xAxis: {
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
            },
            data: time  ,
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(33,148,246,0.2)',
                },
            },
            axisTick: {
                show: false,
            },
        },
        series: [
            {
                name: '死亡人数',
                type: 'line',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {
                    color: '#52C1F5',
                    shadowBlur: 12,
                    shadowColor: 'rgb(33,148,246,0.9)',
                    shadowOffsetX: 1,
                    shadowOffsetY: 1,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(82, 193, 245, 0.5)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(82, 193, 245, 0.3)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(82, 193, 245, 0.1)',
                    },
                },
                itemStyle: {
                    color: '#52C1F5',
                    borderWidth: 1,
                    borderColor: '#FFF',
                },

                data: h,
            },
            {
                name: '治愈人数',
                type: 'line',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {
                    color: '#FF7A8C',
                    shadowBlur: 12,
                    shadowColor: 'rgb(33,148,246,0.9)',
                    shadowOffsetX: 1,
                    shadowOffsetY: 1,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(255,122,140, 0.5)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,122,140, 0.3)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(255,122,140, 0.1)',
                    },
                },
                itemStyle: {
                    color: '#FF7A8C',
                    borderWidth: 1,
                    borderColor: '#FFF',
                },

                data: s,
            },
        ],
    }
    myright.setOption(option)
    window.addEventListener(
        "resize",
        function (e) {
            myright.resize();

        },
        false
    );
}

function rightfoot(obj) {
    let myright = echarts.init(document.querySelector(".right-c"))
    console.log(obj,286);
    let rightdz=[]
    let rightsl=[]
    obj.TopList.forEach(item=>{
        rightdz.push(item.province)
        rightsl.push(item.importedCase)
    })
    var data = [{
        name: rightdz[0] ,
        value: rightsl[0]
    }, {
        name: rightdz[1] ,
        value: rightsl[1]
    }, {
        name: rightdz[2] ,
        value: rightsl[2]
    }, {
        name: rightdz[3] ,
        value: rightsl[3]
    }, {
        name: rightdz[4] ,
        value: rightsl[4]
    },{
        name: rightdz[5] ,
        value: rightsl[5]
    },{
        name: rightdz[6] ,
        value: rightsl[6]
    },{
        name: rightdz[7] ,
        value: rightsl[7]
    },{
        name: rightdz[8] ,
        value: rightsl[8]
    },{
        name: rightdz[9] ,
        value: rightsl[9]
    },]
    let option = {
        color: ['#59d6ec', "#79d534", "#dbe548",'#59d6ec', "#79d534", "#dbe548",'#59d6ec', "#79d534", "#dbe548",'#59d6ec',],
        tooltip: {//提示
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                type: 'pie',
                radius: '60%',
                left: "30%",
                right: "30%",

                data: data.sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        show: true,
                        formatter: "{b} : {c}pc ({d}%)",
                        textStyle: {
                            fontSize: 3,
                        },
                        position: 'outside'
                    },
                    emphasis: {
                        show: true
                    }
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };
    myright.setOption(option)
    window.addEventListener(
        "resize",
        function (e) {
            myright.resize();

        },
        false
    );
}

onMounted(() => {
    let datas = []
    let fn = new Promise((resolve, reject) => {
        $.ajax({
            url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
            dataType: 'jsonp',
            success(res) {
                // console.log(res,28);
                let listData = JSON.parse(res.data)
                // console.log(listData, 265);
                let right1 = listData.foreignList
                let right2 = listData.globalDailyHistory
                let right3 = listData.importStatis
                resolve({ right1, right2, right3 })
            },
        })
    })
    fn.then(res => {
        console.log(res, 36);
        datas = res
        righttop(datas.right1)
        rightcon(datas.right2)
        rightfoot(datas.right3)
    })
})
</script>
  
<style scoped lang='scss'>
.top-right {
    flex: 2;
    width: 100%;
    height: calc(100% - 80px);
}

.right-a {
    width: 570px;
    height: 330px;
}

.right-b {
    width:570px;
    height: 330px;
}

.right-c {
    width: 570px;
    height: 330px;
}
</style>